import type { CSSProperties, VNode } from 'vue'

export interface WrapperProps {
  /**
   * @description 组件的样式
   * @default {}
   */
  wrapperStyle?: CSSProperties

  /**
   * @description 滑块条的样式
   * @default {}
   */
  barStyle?: CSSProperties

  /**
   * @description 滑块内容的样式
   * @default {}
   */
  contentStyle?: CSSProperties

  /**
   * @description 滑块的样式
   * @default {}
   */
  actionStyle?: CSSProperties

  /**
   * @description 验证通过的文字
   * @default '验证通过'
   */
  successText?: string

  /**
   * @description 提示文字
   * @default '请按住滑块拖动'
   */
  text?: string

  /**
   * @description 是否作为插槽使用
   * @default false
   */
  isSlot?: boolean
}

export interface CaptchaVerifyPassingData {
  /**
   * @description 是否通过验证
   * @default false
   */
  isPassing: boolean

  /**
   * @description 验证通过的时间
   * @default 0
   */
  time: number | string
}

export interface SliderRotateVerifyPassingData {
  /**
   * @description 事件对象
   */
  e: MouseEvent | TouchEvent

  /**
   * @description 移动距离
   */
  moveDistance: number

  /**
   * @description 位移距离
   */
  moveX: number
}

export type WapperEmits = {
  /**
   * @description 开始拖拽时触发
   */
  start: [MouseEvent | TouchEvent]

  /**
   * @description 拖拽中时触发
   */

  move: [SliderRotateVerifyPassingData]

  /**
   * @description 结束拖拽时触发
   */
  end: [MouseEvent | TouchEvent]

  /**
   * @description 验证通过时触发
   */
  success: [CaptchaVerifyPassingData]
}

interface PassingProps {
  /**
   * @description 是否通过验证
   * @default false
   */
  isPassing: boolean
}
export interface WrapperSlots {
  /**
   * @description 内容插槽
   */
  content?: (props: PassingProps) => VNode[]

  /**
   * @description 滑块图标插槽
   */
  actionIcon?: (props: PassingProps) => VNode[]
}

export interface WrapperExposes {
  /**
   * @description 重置
   */
  resume: () => void
}

export interface BarProps {
  /**
   * @description 滑块条的样式
   * @default {}
   */
  barStyle: CSSProperties

  /**
   * @description 是否返回初始位置
   * @default false
   */
  backLeft: boolean
}

export interface BarExposes {
  /**
   * @description 获取滑块条的元素
   * @returns 滑块条的元素
   */
  getEl: () => HTMLDivElement | null

  /**
   * @description 设置滑块条的宽度
   * @param val 宽度
   */
  setWidth: (val: string) => void
}

export interface ContentProps {
  /**
   * @description 内容的样式
   * @default {}
   */
  contentStyle: CSSProperties

  /**
   * @description 是否通过验证
   * @default false
   */
  isPassing: boolean

  /**
   * @description 验证通过的文字
   * @default '验证通过'
   */
  successText?: string

  /**
   * @description 提示文字
   * @default '请按住滑块拖动'
   */
  text?: string
}

export interface ContentExposes {
  /**
   * @description 获取内容的元素
   * @returns 内容的元素
   */
  getEl: () => HTMLDivElement | null

  /**
   * @description 设置内容的宽度
   * @param val 宽度
   */
  setWidth: (val: string) => void
}

export interface ActionProps {
  /**
   * @description 滑块的样式
   * @default {}
   */
  actionStyle: CSSProperties

  /**
   * @description 是否通过验证
   * @default false
   */
  isPassing: boolean

  /**
   * @description 是否返回初始位置
   * @default false
   */
  backLeft: boolean
}

export interface ActionExposes {
  /**
   * @description 获取滑块的元素
   * @returns 滑块的元素
   */
  getEl: () => HTMLDivElement | null

  /**
   * @description 获取滑块的样式
   * @returns 滑块的样式
   */
  getStyle: () => CSSStyleDeclaration | undefined

  /**
   * @description 设置滑块的位置
   * @param val 位置
   */
  setLeft: (val: string) => void
}
